<template>
	<view class="container">
		<Header />
		<view class="categorys">
			<view class="category" @click="jumpToType(categroy.id)" v-for="categroy in categoryies">
				<uni-icons :type="categroy.type" size="25"></uni-icons>
				<text class="category-text">{{categroy.category}}</text>
			</view>
		</view>
		<uni-scroll-view class="presets" :lower-threshold="50">
			<view class="preset-title">大家经常做的梦</view>
			<view v-for="preset in presets" @click="routerPush(preset)" class="preset-tag">{{preset}}</view>
		</uni-scroll-view>
	</view>
</template>

<script lang="ts">
	import { defineComponent, ref } from "vue"
	import { Category } from "../../types";
	import { http } from "../../utils/api.service";
	import { CategoryIcon } from "./constant";
	import Header from "../components/header.vue"
	export default defineComponent({
		components: {
			Header
		},
		setup() {
			const categoryies = ref<Category[]>([])
			const presets = ref<string[]>([])

			const routerPush = (text : string) => {
				uni.navigateTo({
					url: "/pages/detail/index" + `?keyword=${text}`
				})
			}
			const jumpToType = (id : string) => {
				uni.navigateTo({
					url: "/pages/types/index" + `?id=${id}`
				})
			}

			const getPresetDetail = (preset : string) => {
				http({
					url: `/list`,
					method: "GET",
					data: {
						keyword: preset
					}
				}).then((res) => {
					console.log(res);
				})
			}

			http({
				url: "/category",
				method: "GET"
			}).then((res : any) => {
				const tempCates = res.map(k => {
					return {
						...k,
						type: CategoryIcon[k.category]
					}
				})
				categoryies.value = tempCates
			})

			http({
				url: "/presets",
				method: "GET"
			}).then((res : any) => {
				presets.value = res.preset as string[]
			})

			return {
				categoryies,
				presets,
				getPresetDetail,
				routerPush,
				jumpToType,
			}
		}
	})
</script>

<style lang="scss">
	.index-top {
		background-image: url(../../static/bg.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		height: 200px;
	}

	.presets {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		font-size: 13px;

		.preset-title {
			width: 100%;
			font-size: 12px;
			margin-left: 18px;
			padding-top: 10px;
		}

		.preset-tag {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 15%;
			border-radius: 10px;
			margin: 5px;
			padding: 4px;
			background-color: #F4EFE9;
		}
	}

	.categorys {
		display: flex;
		flex-wrap: wrap;
		padding: 10px 0;

		.category {
			width: 25%;
			padding: 5px 0px;
			display: flex;
			flex-direction: column;
			align-items: center;

			&-text {
				font-size: 13px;
			}

			.img {
				width: 100%;
			}
		}
	}
</style>